<!--  -->
<template>
  <div class="page-login">
    <div class="wrap">
      <div class="wrap_left">
        <h2>Welcome Back !</h2>
        <p>
          A full-suite education solution that <br />empowers educators and
          learners around <br />the world. kids around the world
        </p>
        <div class="img">
          <img :src="require('@/assets/images/Penguin_Image.png')" alt="" />
        </div>
      </div>
      <div class="wrap_right">
        <div class="title">log In</div>
        <div class="form">
          <template v-for="item in fromData">
            <gg-input
              :key="item.key"
              :ref="item.key"
              v-model="item.value"
              filedType="input"
              :type="item.type"
              :placeholder="item.placeholder"
              :error="errorObj[item.key]"
              @keyup="validate(item.key)"
            />
          </template>

          <div class="forgot">
            <router-link :to="{ path: '/forgotPwd' }"
              >Forgot password</router-link
            >
          </div>
          <div class="bottom">
            <div class="remember">
              <md-checkbox v-model="checkboxVal" class="md-primary"
                >Rember me</md-checkbox
              >
            </div>
            <div class="submit" @click="handleLogin">login</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fromData: [
        {
          type: "input",
          value: "",
          placeholder: "Email address",
          key: "formLogin",
          reg: /^\w+@[a-z0-9]+\.[a-z]{2,4}$/,
          errorText: "Invalid email address",
        },
        {
          type: "password",
          value: "",
          placeholder: "Password",
          key: "formPassword",
          reg: /^[\S]{8,}$/,
          errorText: "密码不能少于8位数",
        },
      ],
      errorObj: {
        formLogin: {
          show: false,
          message: "Email address required",
        },
        formPassword: {
          show: false,
          message: "Password required",
        },
      },
      checkboxVal: false,
    };
  },
  methods: {
    validate(ref) {
      this.errorObj = {};
      let isError = false;
      try {
        this.fromData.forEach((item) => {
          // 提交之前先将每个input初始化字段init,show设为false，要不无法触发默认错误提示
          this.$refs[item.key][0].init = false;
          if (item.reg && !item.reg.test(item.value)) {
            this.errorObj[item.key] = {
              show: true,
              message: item.errorText,
            };
            isError = true;
            // 只要有一个不符合条件就终止循环,跳出循环体
            throw Error();
          }
        });
      } catch (error) {}
      return !isError;
    },
    handleLogin(e) {
      if (this.validate()) this.$router.push("/");
    },
  },
  created() {},
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类

.page-login {
  width: 1424px;
  height: 584px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("~@/assets/images/login_bg.png") no-repeat 50% 100%;
  overflow: hidden;
  .wrap {
    display: flex;
    width: 800px;
    height: 560px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.16);
    border-radius: 16px;
    overflow: hidden;
    .wrap_left {
      flex: 1 1 50%;
      height: 100%;
      background: #41d4b6;
      padding: 50px 32px;
      text-align: left;

      h2 {
        font-family: OpenSans-Bold;
        font-size: 32px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 17px;
        line-height: 45px;
      }
      p {
        font-size: 16px;
        font-family: Roboto;
        font-weight: 500;
        color: #fff;
        line-height: 24px;
        margin-bottom: 58px;
      }
      .img {
        padding: 0 16px;
      }
    }
    .wrap_right {
      flex: 1 1 50%;
      padding: 50px 32px;
      text-align: left;
      background: #fff;
      .title {
        height: 43px;
        line-height: 43px;
        font-family: OpenSans-Bold;
        color: #202124;
        font-size: 32px;
        margin-bottom: 100px;
      }
      .form {
        .password {
          margin-bottom: 5px;
        }
        .forgot {
          text-align: right;
          font-size: 12px;
          font-family: Roboto;
          font-weight: 500;
          color: #1a73e8;
        }
      }
      .bottom {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .remember {
          float: left;
        }
        .submit {
          float: right;
          width: 64px;
          height: 32px;
          background: #1a73e8;
          color: #fff;
          font-family: OpenSans-Bold;
          border-radius: 4px;
          text-align: center;
          line-height: 32px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>